import classnames from 'classnames'
import dayjs from 'dayjs'
import { Component } from 'react'
import { createRef } from 'react'
import { orderBy, random } from 'lodash'

const avatars = [
  {
    author: '传智教育',
    avatar: 'http://www.itcast.cn/2020gw/images/indeximg/logobot2.jpg',
  },
  {
    author: '黑马程序员',
    avatar: 'http://www.itheima.com/images/logo.png',
  },
  {
    author: '上海前端',
    avatar: 'http://geek.itheima.net/images/user_head.jpg',
  },
]

class App extends Component {
  // 封装一个通用的dayjs函数
  formatTime = (time, str = 'YYYY-MM-DD HH-mm-ss') => {
    return dayjs(time).format(str)
  }

  inputRef = createRef()

  state = {
    // hot: 热度排序  time: 时间排序
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot',
      },
      {
        id: 2,
        name: '时间',
        type: 'time',
      },
    ],
    active: 'hot',
    list: [
      {
        id: 2,
        author: '传智教育',
        comment: '好口碑IT培训机构,一样的教育,不一样的品质',
        time: new Date('2022-12-10 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1,
        avatar: 'http://www.itcast.cn/2020gw/images/indeximg/logobot2.jpg',
      },
      {
        id: 3,
        author: '黑马程序员',
        comment: '键盘敲烂，月薪过万',
        time: new Date('2021-12-11 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0,
        avatar: 'http://www.itheima.com/images/logo.png',
      },
      {
        id: 1,
        author: '上海前端',
        comment: '月薪1万5，简简单单',
        time: new Date('2020-12-11 10:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1,
        avatar: 'http://geek.itheima.net/images/user_head.jpg',
      },
    ],
    // 准备获取评论的数据 (使用受控组件来获取)
    inputComment: '',
  }

  // 获取评论内容
  getinputComment = (e) => {
    // console.log(e.target.value)
    this.setState({
      inputComment: e.target.value,
    })
  }

  // 发送评论
  handleClick = () => {
    // 优化: 输入框中输入的内容为空不执行下面代码, 并且鼠标聚焦到输入框中
    // 1. 使用createRef 获取html结构
    if (!this.state.inputComment.trim()) {
      this.inputRef.current.focus()
      return
    }

    // 处理下面的数据中重复的存在, 准备一个constant然后可以根据里面的数据随机获取数据添加到下面中
    // 生成随机数作为下标
    // 方式一:
    // const index = Math.floor(Math.random() * this.state.list.length)
    // 方式二: random工具函数
    const index = random(0, avatars.length - 1, null)
    const userInfo = avatars[index]

    // 将数据添加到下方(不能直接修改state中的数据)
    const commentItem = {
      id: Date.now(),
      author: userInfo.author,
      comment: this.state.inputComment,
      time: new Date(),
      // 1: 点赞 0：无态度 -1:踩
      attitude: 1,
      avatar: userInfo.avatar,
    }

    // 将上面上面准备少的数据添加到 list中
    // 1. 将原来的数据进行复制一份添加commentItem
    // 2. 使用setstate()函数来进行覆盖state中的list值
    // 3. 再讲输入框置空
    const newList = [...this.state.list, commentItem]
    this.setState({
      list: newList,
      inputComment: '',
    })
  }

  // 删除评论
  // 1. 遍历数组里面的id和获取的id相同的删除, 并且重新赋值给list
  delComment = (id) => {
    // console.log(id)
    const newList = this.state.list.filter((item) => item.id !== id)
    this.setState({
      list: newList,
    })
  }

  // 完成点赞和不喜欢的功能
  // 1. 需要获取当前是什么数据需要点赞, 和踩的那条数据
  // 2. 利用三元运算符对里面的数据进行判断点赞 1 改变成 0 反之相反
  // 3. 重新赋值给list中的attitude
  changeAttitude = (id, attitude) => {
    // console.log(id, attitude)
    // 方式一:
    // 赋值list里面的数据, 找到对应id的数据, 赋值attitude, 然后从事setstate
    // const newList = [...this.state.list]
    // const temp = newList.find((item) => item.id === id)
    // temp.attitude = attitude
    // this.setState({
    //   list: newList,
    // })

    // 方式二:
    // 1. 使用setstate API实现对数据的改变, 使用map遍历找到id的哪一项, 改变id 的哪一项数据
    // 2. 数组中其他的每一项不同的直接然后给list中
    this.setState({
      list: this.state.list.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            attitude,
          }
        } else {
          return item
        }
      }),
    })
  }

  // 点击切换tab栏
  // 1. 获取数据里面的type, 控制是否高亮的字段是active
  // 2. 将active值给active就能改变是否高亮 使用setstate
  // 3. 控制里面按时间排序和按id排序(本质就是对数组进行考本)
  // 4. 对两种情况进行判断
  changeTab = (type) => {
    // 方式一:
    // const newList = [...this.state.list]
    // if (type === 'hot') {
    //   newList.sort((a, b) => {
    //     return a.id - b.id
    //   })
    // } else {
    //   newList.sort((a, b) => {
    //     return a.time - b.time
    //   })
    // }
    // this.setState({
    //   active: type,
    //   list: newList,
    // })

    //方式二: 使用工具函数进行排序
    this.setState({
      active: type,
      list: orderBy(this.state.list, type === 'hot' ? 'id' : 'time', ['asc']),
    })
  }
  render() {
    return (
      <div className="App">
        <div className="comment-container">
          {/* 评论数 */}
          <div className="comment-head">
            <span>5 评论</span>
          </div>
          {/* 排序 */}
          <div className="tabs-order">
            <ul className="sort-container">
              {this.state.tabs.map((item) => {
                return (
                  <li
                    className={classnames({
                      on: item.type === this.state.active,
                    })}
                    key={item.id}
                    onClick={() => this.changeTab(item.type)}
                  >
                    按{item.name}排序
                  </li>
                )
              })}
              {/* <li>按时间排序</li> */}
            </ul>
          </div>

          {/* 添加评论 */}
          <div className="comment-send">
            <div className="user-face">
              <img
                className="user-head"
                src="http://geek.itheima.net/images/user_head.jpg"
                alt=""
              />
            </div>
            <div className="textarea-container">
              <textarea
                cols="80"
                rows="5"
                placeholder="发条友善的评论"
                className="ipt-txt"
                value={this.state.inputComment}
                onChange={this.getinputComment}
                ref={this.inputRef}
              />
              <button className="comment-submit" onClick={this.handleClick}>
                发表评论
              </button>
            </div>
            <div className="comment-emoji">
              <i className="face"></i>
              <span className="text">表情</span>
            </div>
          </div>

          {/* 评论列表 */}
          <div className="comment-list">
            {this.state.list.map((item) => {
              return (
                <div className="list-item" key={item.id}>
                  <div className="user-face">
                    <img className="user-head" src={item.avatar} alt="" />
                  </div>
                  <div className="comment">
                    <div className="user">{item.author}</div>
                    <p className="text">{item.comment}</p>
                    <div className="info">
                      <span className="time">{this.formatTime(item.time)}</span>
                      <span
                        className={classnames('like', {
                          liked: item.attitude === 1,
                        })}
                        onClick={() => {
                          this.changeAttitude(
                            item.id,
                            item.attitude === 1 ? 0 : 1
                          )
                        }}
                      >
                        <i className="icon" />
                      </span>
                      <span
                        className={`hate ${item.attitude === -1 && 'hated'}`}
                        onClick={() => {
                          this.changeAttitude(
                            item.id,
                            item.attitude === -1 ? 0 : -1
                          )
                        }}
                      >
                        <i className="icon" />
                      </span>
                      <span
                        className="reply btn-hover"
                        onClick={() => this.delComment(item.id)}
                      >
                        删除
                      </span>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      </div>
    )
  }
}

export default App
